<template>
  <div>
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <!-- <go-back v-if="!backQueryData" :aa="preurl" :white="true"></go-back>
          <go-back v-else :aa="preurl" :bb="backQueryData" :white="true"></go-back> -->
        <headerBack></headerBack>
          <div class="main">
            <div class="title">
              <h3>{{ jobTitle }}</h3>
              <div class="describe">
                <p>{{ jobPosition }}</p>
                <p>{{ '热度 ' + jobView }}</p>
              </div>
            </div>
            <div class="content">
              <ul class="tabList">
                <li :class="['tabItem', tabView == 'survey' ? 'tabAction' : '']" @click="handleChoTabItem('survey')">概况</li>
                <li :class="['tabItem', tabView == 'aboutAllMajor' ? 'tabAction' : '']" @click="handleChoTabItem('aboutAllMajor')">对应专业类</li>
              </ul>
              <div style="padding: 0.32rem;">
                <keep-alive>		
                  <component v-bind:is="tabView" :jobDetail="jobDetail"></component>	
                </keep-alive>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>  
</template>

<script>
import headerBack from '~/components/headerBack'
import { getJobDetail } from '~/api/job'
import Survey from './survey'
import AboutAllMajor from './aboutAllMajor'
import { Tab, TabItem } from 'vux'
import ls from 'store2';
export default {
  components: {
    headerBack,
    Tab,
    TabItem,
    Survey,
    AboutAllMajor
  },
  mounted() {
    const name = this.$route.query.type
    ls.remove('jobDetailType')
    if (ls.get('workMsg')) {
      this.preurl = '/professional/workList'
      this.backQueryData = null
    } else if (ls.get('jobMsg')) {
      this.preurl = '/professional/jobList'
      this.backQueryData = ls.get('jobMsg')
    } else if (ls.get('majorDetailQueryData')) {
      this.preurl = '/professional/detail'
      this.backQueryData = ls.get('majorDetailQueryData')
    
    } else {
      this.preurl = '../professional'
    }
    this.getJobDetail(name)
  },			
  data() {
    return {
      preurl:ls.get('preUrl'),
      backQueryData: ls.get('jobMsg'),
      jobTitle: '', // 职位名称
      jobView: '', // 职位热度
      jobDetail: {}, // 职位详情
      jobPosition: '',
      tabView: 'survey', // tab选择   survey--概况  aboutAllMajor--对应专业类
    }
  },
  methods: {
    // 获取职位详情
    getJobDetail(title) {
      this.$vux.loading.show()
      getJobDetail({ name: title }).then(res => {
        if(res.data){
          this.jobDetail = res.data
          console.log('this.jobDetail: ', this.jobDetail);
          this.jobTitle = res.data.jobTitle
          this.jobView = res.data.view
          this.jobPosition = res.data.position
        }
       
      }).finally(() => {
        this.$vux.loading.hide()
      })
    },
    // 切换Tab页 
    handleChoTabItem(type) {
      this.tabView = type;
    },
  },
}
</script>

<style lang="less" scoped>
  .outDiv {
    width: 100%;
    height: 100vh;
    .main {
      .title {
        padding: 0.32rem;
        background: #FFF;
        margin-bottom: 0.24rem;
        h3 {
          font-size: 0.36rem;
          font-weight: bold;
          color: #222;
          line-height: 0.57rem;
          margin-bottom: 0.32rem;
        }
        .describe {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        p {
          color: #999;
          font-size: 0.24rem;
        }
      }
      .content {
        background: #FFF;
        padding-bottom: 0.3rem;
        .tabList {
          padding: 0.35rem 0;
          list-style: none;
          padding-left: 0;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          border-bottom: 1px solid #E5E8ED;
          .tabItem {
            padding: 0 0.32rem;
            border-right: 1px solid #E5E8ED;
            color: #999;
            font-size: 0.3rem;
            line-height: 0.4rem;
          }
          .tabItem:last-child {
            border-right: none;
          }
          .tabAction {
            color: #80D566;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>
